import React, {useEffect} from 'react'
import {Form, Row, Col, Input, Select, Cascader} from 'antd'

const {Option} = Select

const bankInformation = (props: any) => {
	const {data, citysList} = props
	const [form] = Form.useForm()
	useEffect(() => {
		const newData = data?.bankData?.map(
			(item: {bankProvince: string; support: number}) => ({
				...item,
				bankProvince: item?.bankProvince?.split(',')?.map(Number),
				support: item?.support === 0 ? undefined : item?.support,
			}),
		)
		form.setFieldsValue({bankData: newData})
	}, [data])

	return (
		<div>
			<Form
				form={form}
				name="basic"
				layout="horizontal"
				labelCol={{flex: '140px'}}
				labelAlign="right"
				labelWrap
				disabled
				autoComplete="off">
				{data?.supplierType === 'SP_GYS' ? (
					<Form.List name="bankData">
						{(fields) => (
							<>
								{fields.map((field) => (
									<Row gutter={12} key={field.key}>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="银行账号"
												name={[
													field.name,
													'bankAccount',
												]}
												rules={[
													{required: true, max: 20},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户银行"
												name={[field.name, 'bankName']}
												rules={[
													{required: true, max: 20},
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户银行只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户行名称"
												name={[
													field.name,
													'accountBankName',
												]}
												rules={[
													{required: true, max: 20},
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户行名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户名称"
												name={[
													field.name,
													'accountName',
												]}
												rules={[
													{required: true, max: 20},
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="联行号"
												name={[field.name, 'bankNo']}
												rules={[{max: 20}]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
									</Row>
								))}
							</>
						)}
					</Form.List>
				) : (
					''
				)}
				{data?.supplierType === 'CZ_GYS,32' ? (
					<Form.List name="bankData">
						{(fields) => (
							<>
								{fields.map((field) => (
									<Row gutter={12} key={field.key}>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="银行名称"
												name={[field.name, 'bankName']}
												rules={[
													{required: true, max: 20},
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'银行名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="银行支行名称"
												name={[
													field.name,
													'accountBankName',
												]}
												rules={[
													{required: true, max: 20},
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'银行支行名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户账号"
												name={[
													field.name,
													'bankAccount',
												]}
												rules={[{required: true}]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="银行省份/城市"
												name={[
													field.name,
													'bankProvince',
												]}
												rules={[{required: true}]}>
												<Cascader
													fieldNames={{
														label: 'name',
														value: 'id',
														children:
															'cityInfoList',
													}}
													options={citysList}
													placeholder="请选择"
												/>
											</Form.Item>
										</Col>
									</Row>
								))}
							</>
						)}
					</Form.List>
				) : (
					''
				)}
				{data?.supplierType !== 'SP_GYS' &&
				data?.supplierType !== 'CZ_GYS,32' ? (
					<Form.List name="bankData">
						{(fields) => (
							<>
								{fields.map((field) => (
									<Row gutter={12} key={field.key}>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="支持银承"
												name={[field.name, 'support']}>
												<Select
													placeholder="请选择"
													allowClear>
													<Option value={1}>
														是
													</Option>
													<Option value={2}>
														否
													</Option>
												</Select>
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户银行"
												name={[field.name, 'bankName']}
												rules={[
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户银行只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户名称"
												name={[
													field.name,
													'accountName',
												]}
												rules={[
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户账号"
												name={[
													field.name,
													'bankAccount',
												]}
												rules={[
													{
														pattern: /^[0-9]*$/,
														message:
															'开户账号只能输入纯数字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="开户行名称"
												name={[
													field.name,
													'accountBankName',
												]}
												rules={[
													{
														pattern:
															/^[\u4e00-\u9fa5]{0,}$/,
														message:
															'开户行名称只能输入文字',
													},
												]}>
												<Input placeholder="请输入" />
											</Form.Item>
										</Col>
									</Row>
								))}
							</>
						)}
					</Form.List>
				) : (
					''
				)}
			</Form>
		</div>
	)
}

export default bankInformation
